<template>
	<div class="serve">
		<div class="goods">
			<h3>全部订单</h3>
			<ul>
				<li v-for="it in imglist" :key="it.id">
					<img :src="it.img"/>
					<p>{{it.txt}}</p>
				</li>
			</ul>
		</div>
		<div class="purse">
			<label>
				<h3>我的钱包</h3>
				<i>
					<img src="../../../../public/myimg/right.png" />
				</i>
			</label>
		</div>
		<div class="my-serve">
			<h3>我的服务</h3>
			<ul>
				<li v-for="it in icolist" :key="it.id">
					<img :src="it.img"/>
					<p>{{it.txt}}</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	
	export default{
		name:'Serve',
		props:['propServe','propGoods'],
		data(){
			return{
				icolist:[],
				imglist:[]
			}
		},
		watch:{
			propServe(){
				this.icolist=this.propServe.img
			},
			propGoods(){
				this.imglist=this.propGoods.img
			}
		},
		
	}
</script>

<style scoped>
	.serve{
		width: 100%;
		background: #f5f5f5;
		padding-top: 0.4rem;
	}
	.serve .goods{
		width: 85%;
		height: 2rem;
		margin: 0 auto;
		background: white;
		border-radius: 0.2rem;
		padding: 0.3rem;
	}
	.serve .goods h3{
		font-size: 0.45rem;
		display: block;
		padding-bottom: 0.3rem;
	}
	.serve .goods ul{
		width: 100%;
		display: flex;
		
	}
	.serve .goods ul li{
		text-align: center;
		width: 25%;
		
	}
	.serve .goods ul li img{
		width: 1rem;
		
	}
	.serve .purse label{
		height: 1rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 0.5rem;
		padding-left: 0.3rem;
		padding-right: 0.3rem;
		background: white;
	}
	.serve .purse label h3{
		font-size: 0.5rem;
		font-weight: bold;
		padding-left: 0.2rem;
	}
	.serve .purse label i img{
		width: 0.15rem;
	}
	.serve .my-serve{
		margin-top: 0.3rem;
		padding: 0.2rem;
		background: white;
	}
	.serve .my-serve h3{
		font-size: 0.5rem;
		font-weight: bold;
		display: block;
		padding-left: 0.2rem;
	}
	.serve .my-serve ul{
		width: 100%;
		
	}
	.serve .my-serve ul li{
		width: 25%;
		text-align: center;
		padding-top: 0.5rem;
		display: inline-block;
	}
	.serve .my-serve ul li img{
		width: 0.6rem;
	}
	.serve .my-serve ul li p{
		padding-top: 0.2rem;
	}
</style>
